<template>
  <div class="login">
    <el-card class="login_center">
      <template #header>
        <div class="card_header">
          <span>用户登录</span>
        </div>
      </template>
      <el-form :model="loginFormState" :rules="rules" ref="loginFormRef">
        <el-form-item prop="userName">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model.trim="loginFormState.userName"
            maxlength="32"
            placeholder="请输入账号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input
            prefix-icon="el-icon-lock"
            v-model.trim="loginFormState.pwd"
            maxlength="16"
            show-password
            placeholder="请输入密码"
            clearable
            @keyup.enter.exact="handleLogin"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="width: 100%"
            :loading="loginFormState.loading"
            @click="handleLogin"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  setup() {
    const router = useRouter();
    const store = useStore();
    const loginFormRef = ref();

    const loginFormState = reactive({
      userName: "",
      pwd: "",
      loading: false,
    });

    const rules = {
      userName: [{ required: true, message: "账号不能为空", trigger: "blur" }],
      pwd: [
        { required: true, message: "密码不能为空", trigger: "blur" },
        { min: 5, max: 16, message: "密码长度为5-16位", trigger: "blur" },
      ],
    };

    const handleLogin = () => {
      loginFormRef.value.validate((valid) => {
        if (!valid) {
          return false;
        }

        loginFormState.loading = true;
        const params = {
          userName: loginFormState.userName,
          pwd: loginFormState.pwd,
        };

        store.dispatch("login", params).then(() => {
          loginFormState.loading = false;
          router.push("/");
        });
      });
    };

    return { loginFormRef, loginFormState, rules, handleLogin };
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-image: url("../../assets/img/login.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .login_center {
    width: 396px;
    height: auto;
  }

  .card_header {
    font-size: 18px;
    text-align: center;
  }
}
</style>
